:host {
  display: flex;
  flex-direction: row;
  margin: 20px auto;
  width: 70%;
}

$article-detail-height: 200px;

.article-points {
  width: 30%;
  height: $article-detail-height;
  background-color: #1976d2;
  border-radius: 10px;

  .value,
  .label {
    display: flex;
    flex-direction: row;
    font-variant: all-petite-caps;
    justify-content: center;
    color: #fff;
  }

  .value {
    font-size: 60px;
    font-weight: 500;
  }

  .label {
    font-size: 40px;
  }
}

.article-operation {
  padding-left: 10px;
  width: 40%;
  height: $article-detail-height;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title,
  .operation {
    display: flex;
    flex-direction: row;
  }

  .title {
    font-size: 40px;
    font-weight: 500;
  }

  .link {
    font-size: 20px;
  }

  .operation {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    li {
      font-size: 20px;
      font-weight: 400;
      user-select: none;
      &:hover {
        color: blue;
        cursor: pointer;
      }
    }

    .invalid {
      color: #ccc;
      font-size: 20px;
      font-weight: 400;
      user-select: none;
      &:hover {
        color: #ccc;
        cursor: default;
      }
    }
  }
}
